<template>
  <bottomChartContent title="产品示意图">
    <div id="g6Container"></div>
  </bottomChartContent>
</template>

<script setup>
import { onMounted } from "vue";
import bottomChartContent from "../baseComponent/bottomChartContent.vue";
import G6 from '@antv/g6';


const baseNodeConfig = {
  type: "rect",
  labelCfg: {
    style: {
      fill: '#fff',
      fontSize: 24
    }
  },
  style: {
    fill: '#1967af'
  },
  size: [120, 50]
}

const lineStyle = {
  stroke: '#FAA800',
  lineWidth: 5,
  endArrow: {
    path: G6.Arrow.vee(10, 10, 10), // 箭头的宽高偏移量
    d: 10 // 线段的偏移量
  }
}
onMounted(() => {
  const data = {
    nodes: [
      {
        ...baseNodeConfig,
        x: 100,
        y: 100,
        label: '接单',
        id: '接单',
      },
      {
        ...baseNodeConfig,
        x: 300,
        y: 100,
        anchorPoints: [
          [1, 0.5],
          [1, 1],
          [0, 0.5]
        ],
        label: '生产',
        id: '生产',
      },
      {
        ...baseNodeConfig,
        x: 500,
        y: 100,
        label: '检测',
        id: '检测',
      },
      {
        ...baseNodeConfig,
        x: 700,
        y: 100,
        label: '销售',
        id: '销售',
      },
      {
        ...baseNodeConfig,
        x: 900,
        y: 100,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5]
        ],
        label: '售后',
        id: '售后',
      },
      {
        ...baseNodeConfig,
        x: 800,
        y: 300,
        anchorPoints: [
          [1, 0],
          [0, 0]
        ],
        label: '回厂',
        id: '回厂',
      },
    ],
    edges: [
      {
        source: '接单',
        target: '生产',
        style: {
          ...lineStyle
        }
      },
      {
        source: '生产',
        target: '检测',
        style: {
          ...lineStyle
        }
      },
      {
        source: '检测',
        target: '销售',
        style: {
          ...lineStyle
        }
      },
      {
        source: '销售',
        target: '售后',
        style: {
          ...lineStyle
        }
      },
      {
        source: '售后',
        target: '回厂',
        sourceAnchor: 1,
        targetAnchor: 0,
        style: {
          ...lineStyle
        }
      },
      {
        source: '回厂',
        target: '生产',
        sourceAnchor: 1,
        targetAnchor: 1,
        style: {
          ...lineStyle
        }
      },
    ]
  };
  const graph = new G6.Graph({
    container: "g6Container"
  });
  graph.data(data);
  graph.render();
});
</script>

<style lang="less" scoped>
#g6Container {
  width: 100%;
  height: 100%;
}
</style>
